<script setup lang="ts">
</script>
<template>
    <v-card elevation="10" class="roun-">
        <v-card-text class="position-relative pb-0 ">
            <h5 class="text-h4 mb-1 font-weight-semibold">
                Congratulations Jonathan
            </h5>
            <div class="text-subtitle-1 text-grey100 pb-1 font-weight-medium">You have done 38% more sales</div>
            <div class="mt-6 d-sm-flex d-block">
                <ul class="list-unstyled mb-0">
                    <li class="d-flex align-center mb-5">
                        <v-avatar
                            class="bg-lightsuccess p-7 me-4 rounded-circle d-flex align-items-center justify-content-center"
                            size="48">
                            <img src="@/assets/images/svgs/basket.svg" alt="">
                        </v-avatar>
                        <div>
                            <h6 class="mb-1 text-h6 font-weight-semibold">64 new orders</h6>
                            <p class="text-subtitle-1 text-grey100  font-weight-medium">Processing</p>
                        </div>
                    </li>
                    <li class="d-flex align-center mb-5">
                        <v-avatar
                            class="bg-lightwarning p-7 me-4 rounded-circle d-flex align-items-center justify-content-center"
                            size="48">
                            <img src="@/assets/images/svgs/player-pause.svg" alt="">
                        </v-avatar>
                        <div>
                            <h6 class="mb-1 text-h6 font-weight-semibold">4 orders</h6>
                            <p class="text-subtitle-1 text-grey100  font-weight-medium">On hold</p>
                        </div>
                    </li>
                    <li class="d-flex align-center mb-5">
                        <v-avatar
                            class="bg-lightindigo p-7 me-4 rounded-circle d-flex align-items-center justify-content-center"
                            size="48">
                            <img src="@/assets/images/svgs/truck.svg" alt="">
                        </v-avatar>
                        <div>
                            <h6 class="mb-1 text-h6 font-weight-semibold">12 orders</h6>
                            <p class="text-subtitle-1 text-grey100  font-weight-medium">Delivered</p>
                        </div>
                    </li>
                    <li class="d-flex align-center mb-5">
                        <v-avatar
                            class="bg-lightwarning p-7 me-4 rounded-circle d-flex align-items-center justify-content-center"
                            size="48">
                            <img src="@/assets/images/svgs/player-pause.svg" alt="">
                        </v-avatar>
                        <div>
                            <h6 class="mb-1 text-h6 font-weight-semibold">8 orders</h6>
                            <p class="text-subtitle-1 text-grey100  font-weight-medium">On hold</p>
                        </div>
                    </li>
                </ul>
                <div class="man-working-on-laptop ml-auto mt-16 mb-n3">
                    <img src="@/assets/images/backgrounds/man-working-on-laptop.png" class="w-100" alt="">
                </div>
            </div>
        </v-card-text>
    </v-card>
</template>